import 'package:flutter/material.dart';
import 'package:flutter_app/widgets/Button/index.dart';
import 'package:flutter_app/widgets/TextField/index.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:flutter_app/widgets/bottom_nav.dart';
import 'package:flutter_app/api/user.dart';

import 'package:flutter_redux/flutter_redux.dart';
import 'package:flutter_app/redux/state.dart';

class Login extends StatefulWidget {
  final Map<String, String> params;

  Login({Key key, this.params}) : super(key: key);

  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  final TextEditingController _mobileController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  bool isLoading = false;
  var store;
  bool hadInit = false;

  @override
  Widget build(BuildContext context) {
    return StoreBuilder<APPState>(builder: (context, store) {
      return Scaffold(
          appBar: AppBar(
            elevation: 0,
            centerTitle: true,
            title: const Text('Atome Credit'),
          ),
          body: Padding(
              padding: EdgeInsets.only(left: 20, right: 20),
              child: Stack(
                children: <Widget>[
                  ListView(
                    children: <Widget>[
                      _renderLoginLogo(),
                      _renderFormInputs(),
                      _renderBtns(),
                    ],
                  ),
                  isLoading == true ? _renderLoading() : Center(),
                ],
              )));
    });
  }

  Widget _renderFormInputs() {
    return Column(
      children: <Widget>[
        TextFieldWidget(
          controller: _mobileController,
          labelText: 'Mobile',
          icon: Icon(Icons.smartphone, color: Colors.blue),
        ),
        const SizedBox(height: 12.0),
        TextFieldWidget(
          controller: _passwordController,
          labelText: 'Password',
          icon: Icon(Icons.lock_outline, color: Colors.blue),
        ),
      ],
    );
  }

  Widget _renderLoginLogo() {
    String logoPath = "assets/images/atome_logo.png";
    return Container(
      height: 200,
      child: Center(
        child: Image.asset(
          logoPath,
          width: 60,
        ),
      ),
    );
  }

  Widget _renderLoading() {
    return Center(
      child: SpinKitPulse(
        color: Colors.blue,
        size: 50.0,
      ),
    );
  }

  Widget _renderBtns() {
    return Container(
      padding: EdgeInsets.only(top: 80, left: 10, right: 10),
      child: Column(
        children: <Widget>[
          Button(
            text: 'Sign In',
            onClick: _signInBtn,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                child: Container(height: 1, color: Colors.grey),
              ),
              Padding(
                padding: EdgeInsets.only(left: 10, right: 10),
                child: Text(
                  'OR',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              Expanded(
                child: Container(height: 1, color: Colors.grey),
              ),
            ],
          ),
          Button(
            text: 'Register',
            onClick: () {
              print('register');
            },
          )
        ],
      ),
    );
  }

  _signInBtn() async {
    // setState(() {
    //   isLoading = true;
    // });

    try {
      await UserApi.login(
          context, _mobileController.text, _passwordController.text);

      Navigator.of(context)
          .push(MaterialPageRoute(builder: (BuildContext context) {
        return BottomNav(currentIndex: 0);
      }));
    } catch (e) {
      // return toast(context, '密码或者账号错误');
    } finally {
      Future.delayed(
          const Duration(milliseconds: 1000),
          () => {
                // setState(() {
                //   isLoading = false;
                // })
              });
    }
  }
}
